import * as echarts from 'echarts'
import { nextTick } from 'vue'

/**
 * @description 绘制实心饼图
 * @param {String} type -solid实心 hollow空心
 * @param {HTMLElement} dom
 * @param {Array} data -渲染参数
 * @param {Boolean} legendShow -图例是否显示
 * @param {Object} solidOption -solid实心饼图配置
 * @param {Object} hollowOption -hollow空心饼图配置
 */
function drewPie(
  type = 'solid',
  dom = '',
  data = [],
  legendShow = true,
  solidOption = {
    radius: '70%',
    center: ['30%', '50%'],
    label: {
      show: false,
    },
  },
  hollowOption = {
    center: ['30%', '50%'],
    radius: ['60%', '80%'],
    label: {
      show: false,
    },
  },
  defaultShowTip = false,
) {
  /**
   * @see https://echarts.apache.org/zh/option.html#series-pie
   */
  const series = {
    solid: [
      {
        type: 'pie',
        roseType: 'radius',
        data,
        ...solidOption,
      },
    ],
    hollow: [
      {
        type: 'pie',
        roseType: 'radius',
        data,
        ...hollowOption,
        // emphasis: {
        //   label: {
        //     show: true,
        //     formatter(params: { name: string value: string | number }): string {
        //       if (params.name && params.name.length > 4) {
        //         return `{value|${params.value}} \n\n {name|${params.name.substring(0, 4)}...}`
        //       }

        //       return `{value|${params.value}} \n\n {name|${params.name}}`
        //     },
        //     rich: {
        //       name: {
        //         color: '#333',
        //         fontSize: '18px',
        //       },
        //       value: {
        //         color: '#333',
        //         fontSize: '32px',
        //         fontFamily: 'PangMenZhengDao',
        //       },
        //     },
        //   },
        // },
      },
    ],
  }[type]
  const pieChart = echarts.init(dom)
  const option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      show: legendShow,
      orient: 'vertical',
      formatter(name) {
        let label = ''
        for (let index = 0; index < data.length; index++) {
          if (name === data[index].name) {
            label = `{name|${
              data[index].name.toString().length > 8
                ? `${data[index].name.toString().substring(0, 8)}...`
                : data[index].name
            }} {value|${(data[index].value / data.reduce((a, c) => { return a + Number(c.value) }, 0) * 100).toFixed(1)}}%`
          }
        }
        return label
      },
      type: 'scroll',
      top: 'middle',
      right: '5%',
      textStyle: {
        rich: {
          name: {
            color: '#333',
            width: 80,
          },
          value: {
            color: '#333',
            fontSize: '16px',
          },
        },
      },
      pageTextStyle: {
        color: '#ccc',
      },
      itemWidth: 10,
      itemHeight: 10,
    },
    series,
  }

  pieChart.setOption(option)

  let highlightIndex = 0

  nextTick(() => {
    pieChart.dispatchAction({
      type: 'highlight',
      dataIndex: 0,
    })
  })

  // 默认显示tip
  if (defaultShowTip) {
    nextTick(() => {
      pieChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 0,
        position(point) {
          // 固定在顶部
          return [point[0] + 40, '10%']
        },
      })
    })
  }

  pieChart.on('mouseover', (e) => {
    pieChart.dispatchAction({
      type: 'downplay',
      dataIndex: 0,
    })

    if (e.dataIndex !== highlightIndex) {
      pieChart.dispatchAction({
        type: 'downplay',
        dataIndex: highlightIndex,
      })
    }

    if (e.dataIndex === 0) {
      pieChart.dispatchAction({
        type: 'highlight',
        dataIndex: e.dataIndex,
      })
    }
  })
  pieChart.on('mouseout', (e) => {
    highlightIndex = e.dataIndex
    pieChart.dispatchAction({
      type: 'highlight',
      dataIndex: e.dataIndex,
    })
  })
  window.addEventListener('resize', () => {
    pieChart.resize()
  })
}

export { drewPie }
